<template>
    <div class="order container">
        <header>
            <van-nav-bar title="提交订单" left-arrow @click-left="$router.back()" />
        </header>

        <section>
            <div class="path" v-if="path">
                <h3 class="path-title">收货信息</h3>
                <div class="path-content" @click="goPath">
                    <div>
                        <span>{{ path.name }}</span>
                        <span>{{ path.tel }}</span>
                    </div>
                    <div>
                        <span>{{ path.province }}</span>
                        <span>{{ path.city }}</span>
                        <span>{{ path.county }}</span>
                        <span>{{ path.addressDetail }}</span>
                    </div>
                </div>
            </div>
            <div class="path" v-else  >
                <h3 class="path-title">您还未添加地址</h3>
                <div class="path-content" @click="goPath">
                      <span>添加地址</span>
                </div>
               
            </div>
            <div class="payment">
                <div class="payment-title">支付方式：</div>
                <van-radio-group v-model="radioPayment">
                    
                    <van-radio name="ali" >支付宝支付</van-radio>
                    <van-radio disabled name="wx">微信支付</van-radio>
                </van-radio-group>
            </div>
            <div class="goods">
                <ul>
                    <li v-for="(item, index) in goodsList" :key="index">
                        <div>
                            <img :src="item.goodsImgUrl" alt="">
                        </div>
                        <div class="goods-content">
                            <h4>{{ item.goodsName }}</h4>
                            <div class="goods-total">
                                <span>¥{{ item.goodsPrice }}</span>
                                <span>x{{ item.goodsNum }}</span>
                            </div>
                        </div>
                    </li>

                </ul>
            </div>
        </section>
        <footer>
            <div class="order-total">
                <span>共</span>
                <b>{{ total.num }}</b>
                <span>件，</span>
                <span>总金额：</span>
                <b>¥{{ total.price }}</b>
            </div>
            <div class="order-topay" @click="goPayment">
                提交订单</div>
        </footer>
    </div>
</template>

<script>
import { Toast } from 'vant';
import http from '@/common/api/request.js'
import { mapState, mapGetters, mapMutations } from 'vuex'
import bus from '@/common/bus.js'
import qs from 'qs'
export default {
    data() {
        return {
            radioPayment: 'ali',
            path: {},
            item: [],
            total: {
                price: 0,
                num: 0
            }
        }
    },
    computed: {
        ...mapState({
            order_id: state => state.order.order_id,
            selectList: state => state.cart.selectList
        }),
        ...mapGetters(['defaultPath'])
    },
    created() {
        this.goodsList = JSON.parse(this.$route.query.goodsList);
        this.selectAddress();
        this.selectOrder();
    },
    activated() {
        bus.$on('selectPath', function (data) {
            this.path = JSON.parse(data);
        }.bind(this));
        // 选中的商品id号
        this.item = JSON.parse(this.$route.query.detail);
        this.goodsList = JSON.parse(this.$route.query.goodsList);
        
    },
    methods: {
        ...mapMutations(['initData', 'initOrder']),
        // 查询地址
        selectAddress() {
            http.$axios({
                url: '/api/selectAddress',
                method: 'POST',
                headers: {
                    token: true
                }
            }).then(res => {
                this.initData(res.data)
                // 有默认收货地址
                if (this.defaultPath.length) {
                    this.path = this.defaultPath[0];
                } else {
                    this.path = res.data[0];
                }
            })
        },
        // 查询订单
        selectOrder() {
            http.$axios({
                url: '/api/selectOrder',
                method: 'POST',
                headers: {
                    token: true
                },
                data: {
                    orderId: this.order_id
                }
            }).then(res => {
                this.initOrder(res.data);

                this.total = {
                    price: res.data[0].goodsPrice,
                    num: res.data[0].goodsNum
                }
               
            })
        },
        // 选择收货地址
        goPath() {
            this.$router.push({
                path: '/path',
                query: {
                    type: 'select'
                }
            })
        },
        // goNoPath() {
        //     this.$router.push({
        //         path:'/path'
        //     })
        // },
        // 提交订单
        goPayment() {
            // 判断是否选择了收货地址
            if (!this.path) return Toast('请选择收货地址');
            // if (this.radioPayment != 'ali') return Toast('请选择支付方式');
             
            // 发送请求 =》 1.修改订单状态 2.删除购物车的数据
            http.$axios({
                url: '/api/submitOrder',
                method: 'POST',
                headers: {
                    token: true
                },
                data: {
                    orderId: this.order_id,
                    shopArr: this.selectList,
                    pathArr: this.path
                }
            }).then(res => {
                let newArr = [];
                this.goodsList.forEach(v => {
                    newArr.push(v.goodsName)
                })

                // 支付传递的参数
                let dataOrder = {
                    orderId: this.order_id,
                    name: newArr.join(''),
                    price: this.total.price
                }

                if(res.success){
                    // 去支付
                    http.$axios({
                        url:'/api/payment',
                        method:'POST',
                        headers:{
                            token:true,
                            'Content-Type': 'application/x-www-form-urlencoded' 
                        },
                        // qs是增加安全性的序列化
                        data:qs.stringify(dataOrder)
                    }).then(res=>{
                        if(res.success) {
                            // 打开支付宝支付的页面
                            window.location.href = res.paymentUrl;
                        }
                    })
                }
            })
        }
    }
}
</script>

<style scoped>
header {
    width: 100%;
    height: 1.473333rem;

}

::v-deep .van-nav-bar__content {
    background-color: #fff;
    height: 58px;
}

::v-deep .van-nav-bar__title {
    color: #1b1b1b;
    font-size: 18px;
}

::v-deep .van-nav-bar .van-icon {
    color: #1b1b1b;
    font-size: 0.593333rem;
}

section {
    background-color: #f7f7f7;

}

.path-title {
    padding: 0.4rem;
    font-size: 0.48rem;
}

.path-content {
    padding: 0.26rem 0.4rem;
    font-size: 0.473333rem;
    background-color: #FFFFFF;
    text-align: center;
}

.path-content div:last-child {
    padding-top: 0.36rem;
}

.path-content span {
    padding-right: 0.16rem;
}

.payment {
    padding: 0.26rem 0.4rem;
    margin-top: 0.6rem;
    font-size: 0.473333rem;
    background-color: #FFFFFF;

}

::v-deep .van-radio-group {
    display: flex;
    padding: 0.36rem 0;
}

::v-deep .van-radio {
    padding-right: 0.266666rem;
}

::v-deep .van-radio__icon--checked .van-icon {
    background-color: #1b1b1b;
    border-color: #1b1b1b;
}

.goods {
    padding: 0.16rem 0.4rem;
    margin-top: 0.6rem;
    font-size: 0.426666rem;
    background-color: #FFFFFF;


}

.goods ul {
    width: 100%;

}

.goods ul li {
    display: flex;
    width: 100%;
    margin-top: 0.6rem;
}

.goods ul li:not(:last-child)::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    width: 95%;
    height: 90px;
    display: block;
    margin: 0 auto;
    border-bottom: 1px solid #ccc;
}

.goods ul li img {
    width: 1.973333rem;
    height: 1.973333rem;
}


.goods-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding-left: 0.4rem;
}

.goods-total {
    display: flex;
    justify-content: space-between;
}

footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    height: 1.306666rem;
    border-top: 1px solid #ccc;

}

.order-total {
    font-size: 0.426666rem;
}

.order-total em {
    font-size: 0.48rem;
    color: #1b1b1b;
}

.order-total span {
    padding: 0 0.16rem;
}

.order-total b {
    color: #1b1b1b;
    font-size: 20px;
}

.order-topay {
    width: 3.4rem;
    line-height: 1.306666rem;
    color: #fff;
    font-size: 0.426666rem;
    text-align: center;
    background-color: #1b1b1b;
}
</style>